<template>
    <view class="content">
        <view class="_title">
            租约信息
        </view>
        <view class="_name">
            姓名<text>潘伟东</text>
        </view>
        <view class="_name">
            地址<text>奉贤区-奉贤朝阳新村1栋1单元101-RoomA</text>
        </view>

        <view class="_title">
            退房信息
        </view>
        <view class="_name">
            退房日期
            <text class="imgs">
                请选择
                <image src="/static/icon/yjiant.png" mode=""></image>
            </text>
        </view>
        <view class="_name" @click="reason">
            退房原因<text class="imgs">
            请选择
            <image src="/static/icon/yjiant.png" mode=""></image>
        </text>
        </view>

        <view class="u-bottom-line">
            为保障您的权益，提交申请后，请尽快与房东联系，沟通结算租金、押金等费用。
        </view>
        <view class="_buttons">
            <view class="_Submit">
                提交
            </view>
        </view>
        <view class="_box" v-show="flang==1?true:false">
            <view class="u-col-top" @click="cancel">

            </view>
            <view class="_middle">
                <view class="_Tips">
                    请选择
                </view>
                <view class="_option" v-for="(item,index) in arrys" @click="choiceye(index)">
                    {{item}}	<text>
                    <image v-show="imgs==index?true:false" src="/static/icon/duihao.png" mode=""></image></text>
                </view>
                <!-- <view class="_option">
                    提前退房
                    <text><image src="/static/icon/duihao.png" mode=""></image></text>
                </view>
                <view class="_option">
                    特殊退房
                    <text><image src="/static/icon/duihao.png" mode=""></image></text>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgs:0,
                flang:0,
                arrys:['到期退房','提前退房','特殊退房']
            };
        },
        methods:{
            reason(){
                this.flang=1
            },
            cancel(){
                this.flang=0
            },
            choiceye(index){
                if(this.imgs==index){
                    this.flang=0
                }else{
                    this.imgs=index
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .body{
        background-color: #f0f0f0;
    }
    .content {
        width: 750rpx;
        height: 1000rpx;
        background-color: #f0f0f0;
        position: relative;
        ._box{
            width: 750rpx;
            height: 1350rpx;
            z-index: 10000;
            background-color: white;
            position: fixed;
            opacity: 0.96;
            top: 0;
            left: 0;
            ._middle{
                width: 100%;
                height: 400rpx;
                // background-color: green;
                text{
                    display: inline-block;
                    padding-right: 30rpx;
                    float: right;
                    image{
                        width: 40rpx;
                        height: 40rpx;
                    }
                }

                ._option{
                    width: 100%;
                    height: 100rpx;
                    line-height: 100rpx;
                    padding-left: 40rpx;
                }
                ._Tips{
                    width: 100%;
                    height: 100rpx;
                    border-bottom: 1px solid #f0f0f0;
                    line-height: 100rpx;
                    padding-left: 20rpx;
                }
            }
            .u-col-top{
                width: 100%;
                height: 500rpx;
                background-color: yellow;
            }
        }
        ._buttons{
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5) ;
            width: 100%;
            height: 120rpx;
            background-color: white;
            line-height: 120rpx;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            ._Submit{
                display: inline-block;
                width: 80%;
                height: 80rpx;
                text-align: center;
                margin: 0 auto;
                background-color: #ff5500;
                line-height: 80rpx;
                border-radius: 17px;
                color: white;
            }
        }
        .u-bottom-line{
            padding-left: 20rpx;
            padding-right: 20rpx;
            margin-top: 20rpx;
            color: #939393;
        }
        ._name {
            width: 100%;
            height: 70rpx;
            line-height: 70rpx;
            background-color: white;
            border-bottom: 1px solid #dfdfdf;
            padding-left: 20rpx;
            padding-right: 20rpx;

            .imgs {
                float: right;
                color: #939393;

                image {
                    width: 40rpx;
                    height: 40rpx;
                    vertical-align: middle;
                }
            }

            text {
                float: right;
            }
        }

        ._title {
            width: 100%;
            height: 70rpx;
            line-height: 70rpx;
            color: #939393;
            padding-left: 20rpx;
            padding-right: 20rpx;
        }
    }
</style>
